import React from 'react';
import { Link, Route, Routes, Navigate} from 'react-router-dom'
import ReactPage from './ReactPage';
import VuePage from './VuePage';
import NodePage from './NodePage';
import './lesson.css'

function Lesson() {
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to='reactPage'>React课程</Link></li>
                    <li><Link to='vuePage'>Vue课程</Link></li>
                    <li><Link to='nodePage'>node课程</Link></li>

                </ul>
            </div>

            <div className="lessonContent">
                <div><h3>官网教程</h3></div>
                <Routes>
                <Route path='*' element={<Navigate to='reactPage'/>}></Route>
                    <Route path='reactPage' element={<ReactPage />}></Route>
                    <Route path='vuePage' element={<VuePage />}></Route>
                    <Route path='nodePage' element={<NodePage />}></Route>
                </Routes>
            </div>
        </div>
    )
}

export default Lesson